<!--  -->
<template>
  <div class="avs">
    <ul class="sva">
      <li 
        v-for="(cars, index) in cards"
        :key="index"
        @click="changeView(index)"
         :class="{ clo: currentIndex === index }">
         {{ cars }}
        <span :class="{ active: currentIndex === index }"></span>
      </li>
   
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Nav',
  components: {
    
  },
  data() {
    return {
       currentIndex: 0,
        cards: ['门户管理', '门户统计'],
         
    }
  },
  methods: {
    changeView(index) {
      this.$emit('toGo', this.currentIndex=index)
      
    },
  },
 
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.avs{
    width: 100%;
    height: 70px;
.sva {
  background: #fff;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  li { line-height: 24px;
      width: 64px;
      height: 24px;
      color: #8C8C8C;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 400;
    .active {
      display: block;
      width: 41px;
      height: 3px;
      border-radius: 2px 2px;
      background: #005fff;
      margin: 0px 16px 0 0;
      position: relative;
      top: 20px;
      left: 11px;
    }
  }
  li:nth-child(1){
     margin-left: 23px;
     margin-right: 50px;
  }
   .clo {
      color: #005fff;
    }
}
.lei{
    width: 100%;
    height: 874px;
}
}
</style>
